<template>
  <el-drawer title="选择功能" v-model="functionVisible" close-on-click-modal>

    <!-- Prompt cards -->
    <ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-2">
      <li class="col-span-2 rounded-lg bg-slate-50 shadow dark:bg-slate-900" v-for="func in functionList">
        <div class="flex w-full items-center justify-between space-x-6 p-6">
          <button class="group flex-1 truncate"  @click="selectFunction(func)">
            <div class="flex items-center space-x-3">
              <h3
                  class="truncate text-sm font-medium text-slate-900 transition-colors group-hover:text-blue-600 dark:text-slate-200 dark:group-hover:text-blue-600"
              >
                {{ func.funcName }}
              </h3>
            </div>
            <p class="mt-1 truncate text-sm text-slate-500">
              {{ func.funcDesc }}
            </p>
          </button>
          <button
              class="flex flex-shrink-0 flex-col items-center gap-y-1 rounded-lg p-1 text-xs text-slate-900 transition-colors hover:text-blue-600 focus:text-blue-600 dark:text-slate-200"
          >
            <svg
                @click="selectFunction(func)"
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                  d="M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2"
              ></path>
            </svg>
          </button>
        </div>
      </li>
    </ul>
  </el-drawer>
</template>
<script setup lang="ts" name="AifunctionsDialog">
import {functions} from "/@/api/knowledge/aiPrompt";

const emit = defineEmits(['refresh']);
const functionVisible = ref(false)
const functionList = ref([])


/**
 * 选中提示词
 * @param function
 */
const selectFunction = (func: any) => {
  // Close the function dialog
  functionVisible.value = false
  // Emit a 'refresh' event with the selected function
  emit('refresh', func);
}

/**
 * 查询所有提示词.
 */
const querySearchAsync = async () => {
  const {data} = await functions()
  functionList.value = data
}

/**
 * 打开提示词选择界面.
 */
const openDialog = () => {
  querySearchAsync()
  functionVisible.value = true
}

// Expose the openDialog function
defineExpose({
  openDialog
});
</script>
